<!--
 * @Author: hongzhew
 * @Date: 2022-04-07 17:43:02
 * @LastEditors: hongzhew
 * @LastEditTime: 2022-04-07 17:44:07
 * @Description: 
-->
<!--  -->
<template>
    <div>
        <el-descriptions class="margin-top" :column="settingStore.device === 'mobile' ? 1 : 2" border>
            <el-descriptions-item width="32%">
                <template #label>
                    <div class="cell-item">
                        {{ type === 0 ? $t('应用名称') : type === 1 ? $t('菜单名称') : $t('按钮名称') }}
                    </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.name }}</span>
                <el-input v-else v-model="basicInfo.name" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('唯一标识') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.id }}</span>
                <el-input v-else v-model="basicInfo.id" />
            </el-descriptions-item>
            <el-descriptions-item v-if="type === 0">
                <template #label>
                    <div class="cell-item"> {{ $t('应用别名') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.aliasName }}</span>
                <el-input v-else v-model="basicInfo.aliasName" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('自定义ID') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.customId }}</span>
                <el-input v-else v-model="basicInfo.customId" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">{{ $t('是否启用') }}</div>
                </template>
                <span v-if="editFlag">{{ basicInfo.enabled ? $t('是') : $t('否') }}</span>
                <el-radio-group v-else v-model="basicInfo.enabled">
                    <el-radio :label="true">{{ $t('是') }}</el-radio>
                    <el-radio :label="false">{{ $t('否') }}</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item v-if="type === 0">
                <template #label>
                    <div class="cell-item">{{ $t('是否隐藏') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.hidden ? $t('是') : $t('否') }}</span>
                <el-radio-group v-else v-model="basicInfo.hidden">
                    <el-radio :label="true">{{ $t('是') }}</el-radio>
                    <el-radio :label="false">{{ $t('否') }}</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item v-else>
                <template #label>
                    <div class="cell-item"> {{ $t('是否继承') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.inherit ? $t('是') : $t('否') }}</span>
                <el-radio-group v-else v-model="basicInfo.inherit">
                    <el-radio :label="true">{{ $t('是') }}</el-radio>
                    <el-radio :label="false">{{ $t('否') }}</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item v-if="type === 2">
                <template #label>
                    <div class="cell-item">{{ $t('展示方式') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.displayType === 0 ? $t('图标文本') : basicInfo.displayType === 1 ? $t('图标') : $t('文本') }}</span>
                <el-radio-group v-else v-model="basicInfo.displayType">
                    <el-radio :label="0">{{ $t('图标文本') }}</el-radio>
                    <el-radio :label="1">{{ $t('图标') }}</el-radio>
                    <el-radio :label="2">{{ $t('文本') }}</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('排列序号') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.tabIndex }}</span>
                <el-input v-else v-model="basicInfo.tabIndex" />
            </el-descriptions-item>
            <el-descriptions-item v-if="type === 0">
                <template #label>
                    <div class="cell-item"> {{ $t('是否显示数字') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.showNumber ? $t('是') : $t('否') }}</span>
                <el-radio-group v-else v-model="basicInfo.showNumber">
                    <el-radio :label="true">{{ $t('是') }}</el-radio>
                    <el-radio :label="false">{{ $t('否') }}</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item :span="3" v-if="type === 0">
                <template #label>
                    <div class="cell-item"> {{ $t('获取数字的URL') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.numberUrl }}</span>
                <el-input v-else v-model="basicInfo.numberUrl" />
            </el-descriptions-item>
            <el-descriptions-item v-if="type === 1">
                <template #label>
                    <div class="cell-item"> {{ $t('打开位置') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.target }}</span>
                <el-input v-else v-model="basicInfo.target" />
            </el-descriptions-item>
            <el-descriptions-item v-if="type === 1">
                <template #label>
                    <div class="cell-item"> {{ $t('菜单部件') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.component }}</span>
                <el-input v-else v-model="basicInfo.component" />
            </el-descriptions-item>
            <el-descriptions-item :span="3">
                <template #label>
                    <div class="cell-item"> {{ $t('链接地址') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.url }}</span>
                <el-input v-else v-model="basicInfo.url" />
            </el-descriptions-item>
            <el-descriptions-item :span="3" v-if="type === 0">
                <template #label>
                    <div class="cell-item"> {{ $t('副链接地址') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.url2 }}</span>
                <el-input v-else v-model="basicInfo.url2" />
            </el-descriptions-item>
            <el-descriptions-item :span="3">
                <template #label>
                    <div class="cell-item"> {{ $t('图标地址') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.iconUrl }}</span>
                <el-input v-else v-model="basicInfo.iconUrl" />
            </el-descriptions-item>
            <el-descriptions-item :span="3" v-if="type === 1">
                <template #label>
                    <div class="cell-item"> {{ $t('元信息') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.meta }}</span>
                <el-input type="textarea" :rows="3" v-else v-model="basicInfo.meta" />
            </el-descriptions-item>
            <el-descriptions-item :span="3" v-if="type === 0">
                <template #label>
                    <div class="cell-item"> {{ $t('角色管理URL') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.roleAdminUrl }}</span>
                <el-input v-else v-model="basicInfo.roleAdminUrl" />
            </el-descriptions-item>
            <el-descriptions-item :span="3" v-if="type === 0">
                <template #label>
                    <div class="cell-item"> {{ $t('资源管理URL') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.resourceAdminUrl }}</span>
                <el-input type="textarea" :rows="3" v-else v-model="basicInfo.resourceAdminUrl" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('描述') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.description }}</span>
                <el-input type="textarea" :rows="3" v-else v-model="basicInfo.description" />
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script lang="ts" setup>
import { resourceInfo, getMenuInfo, getOperationInfo } from '@/api/resource/index';
import { useSettingStore } from "@/store/modules/settingStore"
const settingStore = useSettingStore();
const props = defineProps({
    id: String, // id
    type: Number, // 应用0 菜单1 按钮2的区分
    editFlag: Boolean, // 编辑 与 查看 的对应显示变量
    saveClickFlag: Boolean, // 是否点击保存 的变量
});
const emits = defineEmits(['getInfoData']);

// 基本信息
let basicInfo = ref({});
// 监听系统id 当发生改变时重新请求数据

// 请求详情 函数
async function getInfo() {
    let responseInfo;
    if (props.type === 0) {
        // 应用
        responseInfo = await resourceInfo(props.id);
    } else if (props.type === 1) {
        // 菜单
        responseInfo = await getMenuInfo(props.id);
    } else {
        // 按钮
        responseInfo = await getOperationInfo(props.id);
    }
    basicInfo.value = responseInfo.data;
}

onMounted(() => {
    getInfo();
});
watch(
    () => props.id,
    async (new_, old_) => {
        if (new_ && new_ !== old_) {
            getInfo();
        }
    }
);

// 监听 saveClicFlag 当为true 时 将对象传给 index
watch(
    () => props.saveClickFlag,
    async (new_, old_) => {
        if (new_) {
            emits('getInfoData', basicInfo.value);
        }
    }
);
</script>
<style scoped lang="scss">
</style>
